<?php
include_once("../../php/include_all.php");
session_start();
?>
<div class="row-fluid">
	<div class="span12">
		<h3 class="page-title">
            <b>Data Capaian SPM</b>
        </h3>
		<div class="widget">
			<div class="widget-title" style="margin-top: 20px;">
                <h4><i class="icon-reorder"></i>Data Capaian SPM</h4>
                <span class="tools">
                    <a href="javascript:;" class="icon-chevron-down"></a>
                </span>
            </div>
			<div class="widget-body form">
          <form id="form-capaianspm" class="form-horizontal">
					<input type="hidden" name="act" value="capaianspm_action">
					<input type="hidden" id="id_tahun_capaian" name="id_tahun_capaian" value="0">
					<div class="control-group">
                        <label class="control-label">Tahun Capaian</label>
                        <div class="controls">
                            <input type="text" id="tahun_capaian" name="tahun_capaian" class="input-xlarge" />
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Nama indikator</label>
                        <div class="controls">
							<select name="id_indikator" id="id_indikator">
								<option id="id_ind" value=0 >Pilih salah satu</option>
								<?php
									$ind = get_datas("SELECT * from spm_indikator i,spm_jenis_pelayanan j where i.id_skpd=".$_SESSION['_id']." AND i.id_pelayanan=j.id_pelayanan order by i.id_pelayanan");
									foreach($ind as $ind){
								?>
									<option value=<?php echo $ind['id_indikator']; ?>><?php echo $ind['nama_indikator']; ?></option>
								<?php
								}
								?>
							</select>
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Target Capaian</label>
                        <div class="controls">
                            <input type="text" id="target_capaian" name="target_capaian" class="input-small" disabled/>
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Batas Waktu Capaian</label>
                        <div class="controls">
                            <input type="text" id="batas_waktu_capaian" name="batas_waktu_capaian" class="input-xlarge" readonly />
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label"></label>
                        <div class="controls"><textarea id="nama_kompind_pem" name="nama_kompind_pem" class="input-large" readonly /> = 
                            <input type="text" id="nilai_komponen_indikator_pem" name="nilai_komponen_indikator_pem" class="input-small" />
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Capaian</label>
						<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------------------------</label>
						<label class="control-label" style="width:230px;">-------------------------------------------</label>
						<label class="control-label" style="width:100px;"> X 100% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= </label>
                        
                            <input type="text" id="nilai_capaian" name="nilai_capaian" class="input-small" readonly />%
                        
					</div>
					<div class="control-group">
                        <label class="control-label"></label>
                        <div class="controls"><textarea id="nama_kompind_pen" name="nama_kompind_pen" class="input-large" readonly /> = 
                            <input type="text" id="nilai_komponen_indikator_pen" name="nilai_komponen_indikator_pen" class="input-small" />
                        </div>
					</div>
					<div class="form-actions">
                        <a class="btn btn-primary bt-simpan-capaianspm"><div id="loader" style="margin-top:2px"></div>&nbsp;Save</a>
                                <span id="result"></span>
                    </div>
				</form>
     </div>
		</div>
	</div>
	<div class="row-fluid">
        <div class="span12">
			<div class="widget" style="">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i>Tabel Pelayanan</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-chevron-down"></a>
                    </span>
                </div>
				<div class="widget-body">
                    <table class="table table-striped table-bordered" id="sample_1">
                    <thead>
                        <tr>
                            <th class="hidden-phone" style="width:20px; text-align:center;">No</th>
                            <th style="text-align:center;">Tahun</th>
                            <th style="text-align:center;">Nama Indikator</th>
							<th style="text-align:center;">Capaian %</th>
							<th style="text-align:center;">Edit</th>
                        </tr>
                    </thead>
                    <tbody id="tb-capaian">
					<?php 
					$no=1;
					$cap = get_datas("SELECT * FROM spm_indikator i,spm_capaian_spm c where i.id_skpd=".$_SESSION['_id']." AND i.id_indikator=c.id_indikator");
					foreach($cap as $cap){
					?>
						<tr>
							<td style="text-align:center;"><?php echo $no ?></td>
							<td style="text-align:center;"><?php echo $cap['tahun_capaian']?></td>
							<td><?php echo $cap['nama_indikator']?></td>
							<td style="text-align:center;"><?php echo $cap['nilai_capaian']?></td>
							<td style="width:200px; text-align:center;">	
							<a class="btn btn-info btn-edit-capaian" name="<?php echo $cap['id_tahun_capaian'];?>"><i class="icon-edit icon-white"></i>&nbsp; Edit</a>
							<a class="btn btn-danger btn-delete-capaian" name="<?php echo $cap['id_tahun_capaian']; ?>"><i class="icon-trash icon-white"></i>&nbsp; Delete</a>
							</td>
						</tr>
						<?php 
						$no++;
						}
						
						?>
					</tbody>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../assets/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../assets/data-tables/DT_bootstrap.js"></script>
<script>
    jQuery(document).ready(function() {       
         // initiate layout and plugins
        App.init();
    });
</script>

<script>
var urls = 'master_capaianspm/capaianspm_action.php';

$('#id_indikator').change(function(){
    source ="master_capaianspm/get_data.php?idi="+this.value;
    var coba=$.get(source);
    coba.done(function(res){
	$hasil = res.split('__');	
		if($hasil.length==4){
		document.getElementById('target_capaian').value=$hasil[0];
		document.getElementById('batas_waktu_capaian').value=$hasil[1];
		document.getElementById('nama_kompind_pem').value=$hasil[2];
		document.getElementById('nama_kompind_pen').value=$hasil[3];
		}
        	
    })
});
	
$('#nilai_komponen_indikator_pem').keyup(function(){
	var pem = $('#nilai_komponen_indikator_pem').val();
	var pen = $('#nilai_komponen_indikator_pen').val();
	$('#nilai_capaian').val((parseInt(pem)*100)/parseInt(pen));
});

$('#nilai_komponen_indikator_pen').keyup(function(){
	var pem = $('#nilai_komponen_indikator_pem').val();
	var pen = $('#nilai_komponen_indikator_pen').val();
	$('#nilai_capaian').val((parseInt(pem)*100)/parseInt(pen));
});

$('.bt-simpan-capaianspm').click(function(){
	$('#id_indikator').attr('disabled',false);
	$('#tahun_capaian').attr('disabled',false);
	var btn  = $(this);
	var load = $('#loader');
	var rslt = $('#result');
	load.addClass('spinner pull-left');
	btn.removeClass('btn-primary').addClass('btn-info');
	
	var form = $('#form-capaianspm');
	var data = form.serializeArray();
	var post = $.post(urls,data);
	post.done(function(res){
		var result = res.split('__');
		//   0      1     2
		//success__id__(isi tbody)tr
		if(result.length==3){
			if(result[0]=='success'){
				rslt.html('<font color="green">tersimpan...</font>');
				setTimeout(function(){
					rslt.html('');
				},1500);
				var tbody = $('#tb-capaian');
				tbody.html(result[2]);
				$('#id_tahun_capaian').val(0);
				document.getElementById('form-capaianspm').reset();
				 //$('#thn_angg').val(' ');
				init();
			}else{
				rslt.html('<font color="red">'+res+'</font>');
			}
		}else{
			rslt.html('<font color="red">'+res+'</font>');
		}
		load.removeClass();
		btn.removeClass('btn-info').addClass('btn-primary');
	});
});
	
function init(){
$('.btn-delete-capaian').click(function(){
			var btn = $(this);
			var pid = this.name;
			var load = $(this);
			bootbox.confirm("Anda akan menghapus bidang ini?", function(result) {
                if(result==true){
                    if(pid!=0){
                        var post = $.post(urls,{act:"del_capaian",id_tahun_capaian:pid});
                        post.done(function(res){
                            var hasil = res.split('__');
						if(hasil.length==2){
							if(hasil[0] == 'success'){
								var tbody = $('#tb-capaian');
								tbody.html(hasil[1]);
								init();
									}
								}
                        });
                        load.html('<i class="icon-trash icon-white"></i>&nbsp; Delete');
                    }
                }else{
                    load.html('<i class="icon-trash icon-white"></i>&nbsp; Delete');
                }
            });
		});
	
	$('.btn-edit-capaian').click(function(){
		var pid = this.name;
		var form = $('#form-capaianspm');
		var post = $.post(urls,{act:'edit_capaian',id_tahun_capaian:pid});
		post.done(function(res){
			var value = res.split('__');
			$('#id_tahun_capaian').val(value[0]);
                form.find('input[name=tahun_capaian]').val(value[1]); 
				form.find('select[name=id_indikator]').val(value[2]);
                form.find('input[name=nilai_komponen_indikator_pem]').val(value[3]);
                form.find('input[name=nilai_komponen_indikator_pen]').val(value[4]);
				form.find('input[name=nilai_capaian]').val(value[5]);
				form.find('textarea[name=nama_kompind_pem]').val(value[7]);
				form.find('textarea[name=nama_kompind_pen]').val(value[8]);
				form.find('input[name=target_capaian]').val(value[9]);
				form.find('input[name=batas_waktu_capaian]').val(value[10]);
				$('#id_indikator').attr('disabled',true);
				$('#tahun_capaian').attr('disabled',true);
		});
	});
}


init();
</script>